<template>
    <div class="layout-main dept-main">
        <div class="section section-filter">
            <div class="panel-title">
                <span class="title">筛选条件</span>
            </div>
            <div class="panel-content">
                <el-form :inline="true" :model="tableData.filter" @keyup.enter.native="sumbitFilter">
                    <el-form-item label="营业部名称">
                        <el-input v-model="tableData.filter.deptName" placeholder="请输入营业部名称"></el-input>
                    </el-form-item>
                    <el-form-item label="城市">
                        <el-input v-model="tableData.filter.CityName" placeholder="请输入城市"></el-input>
                    </el-form-item>
                    <el-form-item label="区域">
                        <el-input v-model="tableData.filter.qyName" placeholder="请输入区域"></el-input>
                    </el-form-item>
                    <el-form-item label="大区">
                        <el-input v-model="tableData.filter.dqName" placeholder="请输入大区"></el-input>
                    </el-form-item>
                </el-form>
                <div class="form-btn">
                    <button @click="sumbitFilter">筛选</button>
                    <button class="btn-reset" @click="resetFilter">重置</button>
                </div>
            </div>
        </div>
        <div class="section section-table">
            <div class="panel-title">
                <span class="title">筛选结果</span>
                <div class="title-right">
                    <permission permission-key="deptJc:addSalesDeptJc">
                        <button @click="showUpdateLayer">新增</button>
                    </permission>
                </div>
            </div>
            <div class="panel-content">
                <el-table :data="tableData.data" border style="width: 100%">
                    <el-table-column prop="deptName" label="营业部名称">
                    </el-table-column>
                    <el-table-column prop="cityName" label="城市">
                    </el-table-column>
                    <el-table-column prop="qyName" label="区域">
                    </el-table-column>
                    <el-table-column prop="dqName" label="大区">
                    </el-table-column>
                    <el-table-column prop="fbName" label="所属分部">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <permission permission-key="deptJc:editSalesDeptJc">
                                <a @click="showUpdateLayer(scope.row)">编辑</a>
                            </permission>
                            <permission permission-key="deptJc:delSalesDeptJc">
                                <a @click="showDeleteLayer(scope.row.id)">删除</a>
                            </permission>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-if="tableData.total" :current-page="tableData.index" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]"
                    :page-size="tableData.size" :total="tableData.total" layout="total, sizes, prev, pager, next, jumper" @size-change="tableSizeChange"
                    @current-change="getTableData">
                </el-pagination>
            </div>
        </div>
        <!-- 编辑 -->
        <layer :data="editLayer" @on-ok="editSubmit">
            <el-form :model="deptForm" :rules="deptFormRule" :ref="deptFormRef">
                <el-form-item prop="deptName" label="营业部名称" class="is-required">
                    <el-input type="text" v-model="deptForm.deptName" placeholder="请输入营业部名称"></el-input>
                </el-form-item>
                <el-form-item prop="cityName" label="城市" class="is-required">
                    <el-select v-model="deptForm.cityName" placeholder="请搜索城市" filterable remote :remote-method="searchCity" :loading="deptData.loading">
                        <el-option v-for="item in deptData.cityList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="qyName" label="区域" class="is-required">
                    <el-select v-model="deptForm.qyName" placeholder="请选择区域">
                        <el-option v-for="item in deptData.qyList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="dqName" label="大区" class="is-required">
                    <el-select v-model="deptForm.dqName" placeholder="请选择大区">
                        <el-option v-for="item in deptData.dqList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="fbName" label="所属分部" class="is-required">
                    <el-select v-model="deptForm.fbName" placeholder="请选择所属分部">
                        <el-option v-for="item in deptData.fbList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </layer>
        <!-- 删除 -->
        <layer :data="deleteLayer" @on-ok="deleteSubmit"></layer>
    </div>
</template>
<script>
    import deptMixin from './dept'
    export default {
        name: 'dept',
        mixins: [deptMixin]
    }
</script>